<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>光学系统界面</title>
        <style>
            :root {
                --primary-color: #3498db;
                --secondary-color: #2ecc71;
                --background-color: #f0f4f8;
                --card-background: #ffffff;
                --text-color: #2c3e50;
                --border-radius: 10px;
                --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                line-height: 1.6;
                color: var(--text-color);
                background-color: var(--background-color);
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
            }

            .grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 30px;
            }

            @media (min-width: 768px) {
                .grid {
                    grid-template-columns: 1fr 1fr;
                }
            }

            .card {
                background: var(--card-background);
                border-radius: var(--border-radius);
                padding: 30px;
                box-shadow: var(--box-shadow);
                transition: transform 0.3s, box-shadow 0.3s;
            }

            .card:hover {
                transform: translateY(-5px);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            }

            .card-title {
                font-size: 1.8rem;
                font-weight: bold;
                margin-bottom: 25px;
                padding-bottom: 15px;
                border-bottom: 2px solid var(--primary-color);
                color: var(--primary-color);
            }

            .section {
                margin-bottom: 30px;
            }

            .section-title {
                font-size: 1.2rem;
                font-weight: 600;
                margin-bottom: 15px;
                color: var(--secondary-color);
            }

            .info-box {
                background-color: #e8f4fd;
                padding: 15px;
                border-radius: var(--border-radius);
                font-size: 0.9rem;
                margin-bottom: 15px;
                border-left: 4px solid var(--primary-color);
            }

            .input-field {
                width: 100%;
                padding: 12px 15px;
                border: 1px solid #ddd;
                border-radius: var(--border-radius);
                margin-bottom: 15px;
                font-size: 1rem;
                transition: border-color 0.3s;
            }

            .input-field:focus {
                outline: none;
                border-color: var(--primary-color);
            }

            .input-field1 {
                width: 100%;
                padding: 12px 15px;
                border: 1px solid #ddd;
                border-radius: var(--border-radius);
                margin-bottom: 15px;
                font-size: 1rem;
                transition: border-color 0.3s;
            }

            .input-field1:focus {
                outline: none;
                border-color: var(--primary-color);
            }

            .button {
                width: 100%;
                padding: 12px 20px;
                border: none;
                border-radius: var(--border-radius);
                background-color: var(--primary-color);
                color: white;
                cursor: pointer;
                font-size: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin-bottom: 10px;
                transition: background-color 0.3s, transform 0.1s;
            }

            .button:hover {
                background-color: #2980b9;
                transform: translateY(-2px);
            }

            .button:active {
                transform: translateY(0);
            }

            .button.secondary {
                background-color: var(--secondary-color);
            }

            .button.secondary:hover {
                background-color: #27ae60;
            }

            .icon {
                width: 20px;
                height: 20px;
            }

            .nav {
                background-color: var(--primary-color);
                padding: 15px 0;
                margin-bottom: 30px;
            }

            .nav-container {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
            }

            .nav-title {
                color: white;
                font-size: 1.5rem;
                font-weight: bold;
            }

            .overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }

            .overlay-content {
                background-color: white;
                padding: 20px;
                border-radius: var(--border-radius);
                box-shadow: var(--box-shadow);
                max-width: 400px;
                width: 100%;
            }

            .overlay-content label {
                display: block;
                margin-bottom: 10px;
            }

            .overlay-content input {
                margin-bottom: 20px;
                width: 100%;
            }

            .overlay-close {
                background-color: var(--primary-color);
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: var(--border-radius);
                cursor: pointer;
                margin-top: 20px;
            }
            .radio-div{
                display: flex;
                flex-direction: column;
            }
        </style>
    </head>
    <body>
        <nav class="nav">
            <div class="nav-container">
                <div class="nav-title">光学系统界面</div>
            </div>
        </nav>
        <div class="container">
            <!-- 新增悬浮窗元素 -->
            <div class="overlay" id="overlay">
                <div class="overlay-content">
                    <label for="projectPath">项目路径:</label>
                    <!-- 使用 webkitdirectory 属性允许用户选择文件夹路径 -->
                    <input type="text"  id="projectPath"  class="input-field1">
                    <label for="nkPath">NK曲线路径:</label>
                    <input type="text"  id="nkPath"  class="input-field1">
                    <label for="setfosPath">Setfos路径:</label>
                    <input type="text" id="setfosPath" class="input-field1">
                    <label for="threadNum">线程数:</label>
                    <input type="number" id="threadNum" class="input-field1" min="1" value="2">
                    <label for="resultFileNum">仿真结果文件数量:</label>
                    <input type="number" id="resultFileNum" class="input-field1" min="1" value="24">
                    <label for="selectRef">仿真选择:</label>
                    <div class="radio-div">
                        <div style="width: 100%; display: flex;align-items: center;">
                           <label>全部仿真</label>
                           <input style="width: 30px;margin: 0 0 5px 16.25px;" type="radio" id="selectRef1" name="selectRef" value="1">
                        </div>
                        <div style="width: 100%;display: flex;align-items: center;">
                        <label>只仿真Ref</label>
                        <input style="width: 30px;margin: 0 0 5px 10px;" type="radio" id="selectRef2" name="selectRef" value="2">
                        </div>
                    </div>
                    <!-- 新增的选择完成按钮，用于提交用户选择的路径 -->
                    <button class="button" id="submitPathsButton">选择完成</button>
                    <button class="overlay-close" id="closeOverlayButton">关闭</button>
                </div>
            </div>
            <div class="grid">
                <!-- 主动光学 -->
                <div class="card">
                    <h2 class="card-title">主动光学</h2>
                    <div class="section">
                        <h3 class="section-title">参数 Input</h3>
                        <div class="info-box">
                            说明：只需设置一次文件存放地址，可自动识别INK文件夹和RGB/模型的RGB setting Excel。
                        </div>
                        <input type="text" readonly class="input-field" placeholder="文件路径...">
                    </div>
                    <div class="section">
                        <h3 class="section-title">配置仿真模块</h3>
                        <button class="button" id="openOverlayButton">配置仿真</button>
                        <h3 class="section-title">启动仿真</h3>
                        <div class="info-box">
                            说明：①输入其他数据；②启动仿真并生成（所有路径和相应的文件都将自动获取并自动可以显示自己设置）
                        </div>
                        <button class="button" id="startSimulationButton" onclick="startSimulation()">
                            启动仿真
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M5 12h14M12 5l7 7-7 7" />
                            </svg>
                        </button>
                    </div>
                    <div class="section">
                        <h3 class="section-title">Auto-process</h3>
                        <div class="info-box">
                            说明：数据处理，自动转到后台运行打印
                        </div>
                        <button class="button secondary" onclick="autoProcess()">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 3v3m6.366 2.634a9 9 0 010 12.732M6.634 8.634a9 0 000 12.732" />
                            </svg>
                            自动处理
                        </button>
                    </div>
                    <div class="section">
                        <h3 class="section-title">数据筛选</h3>
                        <div class="info-box">
                            说明：①选择待筛选的文件，可定义筛选条件；②上传筛选定义；③输出筛选结果
                        </div>
                        <button class="button secondary" onclick="setFilterConditions()">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M3 4h18M6 9h12M9 14h6M10 19h4" />
                            </svg>
                            筛选条件设置
                        </button>
                        <button class="button secondary" onclick="viewFilterResults()">
                            查看筛选结果
                        </button>
                    </div>
                </div>
                <!-- 被动光学 -->
                <div class="card">
                    <h2 class="card-title">被动光学</h2>
                    <div class="section">
                        <h3 class="section-title">配置文件</h3>
                        <div class="info-box">
                            说明：①选择所有Excel，序次面和比例。
                        </div>
                        <input type="text" class="input-field" placeholder="选择文件...">
                    </div>
                    <div class="section">
                        <h3 class="section-title">Auto-process</h3>
                        <div class="info-box">
                            说明：①自动存储或处理的文件夹；②显示数据处理进度条
                        </div>
                        <button class="button secondary" onclick="autoProcessPassive()">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 3v3m6.366 2.634a9 9 0 010 12.732M6.634 8.634a9 0 000 12.732" />
                            </svg>
                            自动处理
                        </button>
                    </div>
                    <div class="section">
                        <h3 class="section-title">数据筛选</h3>
                        <div class="info-box">
                            说明：①选择待筛选的文件，可定义筛选条件；②上传筛选定义；③输出筛选结果
                        </div>
                        <button class="button secondary" onclick="setFilterConditionsPassive()">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M3 4h18M6 9h12M9 14h6M10 19h4" />
                            </svg>
                            筛选条件设置
                        </button>
                        <button class="button secondary" onclick="viewFilterResultsPassive()">
                            查看筛选结果
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            // 为打开悬浮窗的按钮添加点击事件监听器
            document.getElementById('openOverlayButton').addEventListener('click', () => {
                document.getElementById('overlay').style.display = 'flex';
            });
            // 为关闭悬浮窗的按钮添加点击事件监听器
            document.getElementById('closeOverlayButton').addEventListener('click', () => {
                document.getElementById('overlay').style.display = 'none';
            });
            // 为选择完成按钮添加点击事件监听器，处理获取文件夹路径逻辑
            // document.getElementById('submitPathsButton').addEventListener('click', () => {
            //     const projectPath = document.getElementById('projectPath').value;
            //     const nkPath = document.getElementById('nkPath').value;
            //     if (projectPath === "" || nkPath === "") {
            //         alert("请输入完整的文件路径");
            //         return;
            //     }
            //     // 构建请求数据对象，包含 Pro_path 和 Need_path 字段
            //     const requestData = {
            //         Pro_path: projectPath,
            //         Need_path: nkPath
            //     };
            //     try {
            //         // 发送 POST 请求到 /api/genertPar 接口
            //         fetch('/api/genertPar', {
            //                 method: 'POST',
            //                 headers: {
            //                     'Content-Type': 'application/json'
            //                 },
            //                 body: JSON.stringify(requestData)
            //             }).then(response => response.json())
            //            .then(result => {
            //                 if (result.message === "successed") {
            //                     document.getElementById('overlay').style.display = 'none';
            //                 } else {
            //                     alert("服务错误");
            //                 }
            //             });
            //     } catch (error) {
            //         alert("服务错误");
            //     }
            // });


            document.querySelectorAll('.input-field').forEach(input => {
                input.addEventListener('click', () => {
                    const fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.accept = '*';
                    fileInput.click();

                    fileInput.onchange = (e) => {
                        input.value = e.target.files[0].name;
                    }
                });
            });
            
            
            // 主动光学功能
            function startSimulation() {
                alert('启动仿真流程');
            }

            function autoProcess() {
                alert('开始自动处理数据');
            }

            function setFilterConditions() {
                alert('设置筛选条件');
            }

            function viewFilterResults() {
                alert('查看筛选结果');
            }
            // 被动光学功能
            function autoProcessPassive() {
                alert('开始被动光学自动处理');
            }

            function setFilterConditionsPassive() {
                alert('设置被动光学筛选条件');
            }

            function viewFilterResultsPassive() {
                alert('查看被动光学筛选结果');
            }
            
            
            // 获取Cookie中的值
            function getCookie(name) {
                let matches = document.cookie.match(new RegExp(
                    "(?:^|; )" + name.replace(/([.$?*|{}()[]\+^])/g, '\\$1') + "=([^;]*)"
                ));
                return matches ? decodeURIComponent(matches[1]) : undefined;
            }
        
            // 设置Cookie的值
            function setCookie(name, value, options = {}) {
                options = {
                    path: '/',
                    'max-age': 60 * 60 * 24 * 365, // 设置有效期为一年
                    ...options
                };
                if (options.expires) {
                    options['max-age'] = Math.floor((options.expires.getTime() - Date.now()) / 1000);
                }
                let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
                for (let optionKey in options) {
                    updatedCookie += "; " + optionKey;
                    let optionValue = options[optionKey];
                    if (optionValue !== true) {
                        updatedCookie += "=" + optionValue;
                    }
                }
                document.cookie = updatedCookie;
            }
        
            // 保存路径到Cookie
            function savePathsToCookie(projectPath, nkPath, setfosPath, threadNum, selectRef,resultFileNum) {
                setCookie("projectPath", projectPath);
                setCookie("nkPath", nkPath);
                setCookie("setfosPath", setfosPath);
                setCookie("threadNum", threadNum);
                setCookie("selectRef", selectRef);
                 setCookie("resultFileNum", resultFileNum);
            }
        
            // 从Cookie中加载路径数据
            function loadPathsFromCookie() {
                document.getElementById('projectPath').value = getCookie('projectPath') || '';
                document.getElementById('nkPath').value = getCookie('nkPath') || '';
                document.getElementById('setfosPath').value = getCookie('setfosPath') || '';
                document.getElementById('threadNum').value = getCookie('threadNum') || 2;
                document.getElementById('resultFileNum').value = getCookie('resultFileNum') || 24;
                let selectRef = getCookie('selectRef') || '1';
                document.getElementById('selectRef1').checked = selectRef === '1';
                document.getElementById('selectRef2').checked = selectRef === '2';
            }
        
            // 提交路径并保存到Cookie
            document.getElementById('submitPathsButton').addEventListener('click', () => {
                const projectPath = document.getElementById('projectPath').value;
                const nkPath = document.getElementById('nkPath').value;
                const setfosPath = document.getElementById('setfosPath').value;
                const threadNum = document.getElementById('threadNum').value;
                const selectRef = document.querySelector('input[name="selectRef"]:checked').value;
                const resultFileNum = document.getElementById('resultFileNum').value;
        
                if (projectPath === "" || nkPath === "" || setfosPath === "") {
                    alert("请输入完整的文件路径");
                    return;
                }
        
                // 保存路径到Cookie
                savePathsToCookie(projectPath, nkPath, setfosPath, threadNum, selectRef, resultFileNum);
        
                // 请求接口并处理返回结果
                const requestData = {
                    Pro_path: projectPath,
                    Need_path: nkPath
                };
        
                fetch('/api/genertPar', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(requestData)
                })
                .then(response => response.json())
                .then(result => {
                    if (result.message === "successed") {
                        document.getElementById('overlay').style.display = 'none';
                    } else {
                        alert("服务错误");
                    }
                })
                // .catch(() => {
                //     alert("服务错误");
                // });
            });
        
            // 启动仿真时读取Cookie并提交请求
            document.getElementById('startSimulationButton').addEventListener('click', () => {
                const projectPath = getCookie('projectPath');
                const setfosPath = getCookie('setfosPath');
                const threadNum = getCookie('threadNum');
                const selectRef = getCookie('selectRef');
                const resultFileNum = getCookie('resultFileNum');

                const requestData = {
                    Setfos_path: setfosPath,
                    Result_file_path: projectPath,
                    Thread_num: threadNum,
                    Result_file_num: resultFileNum,
                    select_Ref: selectRef
                };
        
                // 调用接口启动仿真
                fetch('/api/beginSim', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(requestData)
                })
                .then(response => response.json())
                .then(result => {
                    // 处理仿真启动成功逻辑
                    alert("仿真已启动");
                })
                // .catch(() => {
                //     alert("启动仿真失败");
                // });
            });
        
            // 初始化加载Cookie中的配置
            loadPathsFromCookie();
            
            
        </script>
    </body>
</html>